function convertKey(arr, key) {
  let newArr = [];
  arr.forEach((item, index) => {
    let newObj = {};
    for (var i = 0; i < key.length; i++) {
      newObj[key[i]] = item[Object.keys(item)[i]];
    }
    newArr.push(newObj);
  });
  console.log(newArr);
  return newArr;
}
// 机电系统工程合格率;
$.ajax({
  type: "get",
  async: true, //异步执行
  url: base_url + "/systemItemEffectivePercent",
  dataType: "json", //返回数据形式为json
  success: function (data) {
    if (data.code == 1000) {
      if (data.data !== null) {
        electromechanicalSystemData = data.data.dataList;
        if (Object.keys(data.data).length !== 0) {
          $(".electromechanicalSystem_min").text(data.data.min);
          if (electromechanicalSystemData.length !== 0) {
            decorationInstallationEchart();
          } else {
            $(".electromechanicalSystemChart").html(
              "<div class='noData'>今日暂无数据</div>"
            );
          }
        } else {
          $(".electromechanicalSystemChart").html(
            "<div class='noData'>今日暂无数据</div>"
          );
        }
      } else {
        $(".electromechanicalSystemChart").html(
          "<div class='noData'>今日暂无数据</div>"
        );
      }
    } else {
      alert(data.message);
    }
    //   fn();
  },
  error: function (errorMsg) {
    console.log("请求数据失败");
  },
});
// 土建工程合格率
civilEngineeringRateEchart();
function civilEngineeringRateEchart() {
  let civilEngineeringRateE = document.getElementsByClassName(
    "civilEngineeringRateEchart"
  );
  for (var i = 0; i < civilEngineeringRateE.length; i++) {
    let myChart = echarts.init(civilEngineeringRateE[i]);

    var fourPieData = [
      {
        name: "10号线二期",
        value: 100,
      },
      {
        name: "14号线",
        value: 0,
      },
      {
        name: "15号线",
        value: 100,
      },
      {
        name: "18号线",
        value: 100,
      },
    ];

    var titleArr = [],
      seriesArr = [];
    fourPieData.forEach(function (item, index) {
      titleArr.push({
        text: "{num|" + item.value + "}{key| %}",
        subtext: item.name,
        left: index < 2 ? index * 50 + 25 + "%" : index * 50 - 75 + "%",
        top: index < 2 ? "25%" : "72%",
        textAlign: "center",
        textStyle: {
          rich: {
            num: {
              fontWeight: "bold",
              color: "#fff",
              fontFamily: "微软雅黑",
              fontSize: 18,
            },
            key: {
              fontWeight: "bold",
              color: "#fff",
              fontFamily: "微软雅黑",
              fontSize: 15,
            },
          },
        },
        subtextStyle: {
          lineHeight: 0,
          fontSize: 15,
        },
      });
      seriesArr.push(
        {
          name: item.name,
          type: "pie",
          radius: ["40%", "50%"],
          center: [
            index < 2 ? index * 50 + 25 + "%" : index * 50 - 75 + "%",
            index < 2 ? "30%" : "78%",
          ],
          startAngle: 225,
          color: [
            {
              type: "linear",
              x: 1,
              y: 0,
              x2: 0,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(51,227,189,1)", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(51,227,189,.1)", // 100% 处的颜色
                },
              ],
            },
            "transparent",
          ],
          hoverAnimation: true,
          legendHoverLink: false,
          z: 10,
          labelLine: {
            normal: {
              show: false,
            },
          },
          data: [
            {
              value: (75 * item.value) / 100,
            },
            {
              value: 100 - (75 * item.value) / 100,
            },
          ],
        },
        {
          // 背景圆环
          name: "",
          type: "pie",
          radius: ["40%", "50%"],
          center: [
            index < 2 ? index * 50 + 25 + "%" : index * 50 - 75 + "%",
            index < 2 ? "30%" : "78%",
          ],
          silent: true,
          startAngle: 225,
          labelLine: {
            normal: {
              show: false,
            },
          },
          z: 5,
          data: [
            {
              value: 75,
              itemStyle: {
                color: "#1A3B4C",
              },
            },
            {
              value: 25,
              itemStyle: {
                color: "transparent",
              },
            },
          ],
        },
        {
          // 中间圈
          name: "",
          z: 5,
          type: "pie",
          cursor: "default",
          radius: ["35%", "35%"],
          center: [
            index < 2 ? index * 50 + 25 + "%" : index * 50 - 75 + "%",
            index < 2 ? "30%" : "78%",
          ],
          startAngle: 225,
          hoverAnimation: false,
          legendHoverLink: false,
          labelLine: {
            normal: {
              show: false,
            },
          },
          data: [
            {
              value: 75,
              itemStyle: {
                borderColor: "rgba(51,123,321,1)",
                borderType: "dashed",
              },
            },
            {
              value: 25,
              itemStyle: {
                color: "transparent",
              },
            },
          ],
        }
      );
    });

    option = {
      title: titleArr,
      series: seriesArr,
    };
    myChart.setOption(option);
  }
}
//装饰安装工程合格率
// decorationInstallationEchart();
function decorationInstallationEchart() {
  let decorationInstallationE = document.getElementsByClassName(
    "decorationInstallationEchart"
  );
  for (var i = 0; i < decorationInstallationE.length; i++) {
    let myChart = echarts.init(decorationInstallationE[i]);
    var titleArr = [],
      seriesArr = [];
    colors = [
      ["#57bbf7", "#f4f4f7"],
      ["#ffc969", "#f4f4f7"],
      ["#f38b97", "#f4f4f7"],
      ["#b1d882", "#f4f4f7"],
      ["#c0acf9", "#f4f4f7"],
    ];
    electromechanicalSystemData.forEach(function (item, index) {
      titleArr.push({
        text: "验收合格率:" + item.indxVl3,
        left: index < 2 ? index * 40 + 18 + "%" : index * 40 - 41 + "%",
        top: index < 2 ? "17%" : "60%",
        textAlign: "center",
        textStyle: {
          color: "#fff",
          fontSize: 10,
          rich: {
            a: {
              fontSize: 10,
              color: "#29EEF3",
            },
            b: {
              fontSize: 12,
              color: "#29EEF3",
              padding: [0, 0, 14, 0],
            },
            c: {
              fontSize: 10,
              color: "#ffffff",
              padding: [5, 0],
            },
            num: {
              fontSize: 10,
              color: "#ffffff",
              padding: [5, 0],
            },
          },
        },
      });
      seriesArr.push(
        {
          type: "gauge",
          radius: "45%",
          name: item.name,
          center: [
            index < 2 ? index * 39 + 20 + "%" : index * 40 - 40 + "%",
            index < 2 ? "25%" : "68%",
          ],
          clockwise: false,
          startAngle: "75",
          endAngle: "-269.9999",
          splitNumber: 22,
          detail: {
            offsetCenter: [0, -20],
            formatter: " ",
          },
          pointer: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: [
                [0, "#2CFAFC"],
                [
                  0.1 / 100,
                  new echarts.graphic.RadialGradient(
                    1,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "#ffc500",
                      },
                      {
                        offset: 0.5,
                        color: "#ffe53a",
                      },
                      {
                        offset: 1,
                        color: "#feef4c",
                      },
                    ],
                    false
                  ),
                ],
                [1, "rgba(32,187,252,0.15)"],
              ],
              width: 10,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            length: 10,
            lineStyle: {
              color: "#071427",
              width: 2,
            },
          },
          axisLabel: {
            show: false,
          },
          detail: {
            show: true,
            offsetCenter: [0, "120%"],
            color: "#fff",
            formatter: function (params) {
              return item.indxNmDtl;
            },
            textStyle: {
              fontSize: 12,
            },
          },
        },
        {
          type: "pie",
          name: "验收次数:",
          value: item.value,
          radius: ["36%", "38%"],
          center: [
            index < 2 ? index * 39 + 20 + "%" : index * 40 - 40 + "%",
            index < 2 ? "25%" : "68%",
          ],
          hoverAnimation: false,
          clockWise: false,
          itemStyle: {
            normal: {
              color: "#e8c561",
              // fontSize: 30,
            },
          },
          label: {
            normal: {
              show: true,
              position: "center",
              padding: [60, 45, 0, 40],
              align: "center",
              width: 70,
              height: 70,
              lineHeight: 14, // 控制\n的行高
              fontSize: 8,
              formatter: function (param) {
                return (
                  "{a| " + param.seriesName + "}" + "{b|" + item.indxVl1 + "}"
                );
              },
              rich: {
                a: {
                  fontSize: 12,
                  color: "#fff",
                  lineHeight: 23,
                },
                b: {
                  fontSize: 12,
                  color: "#ffe900",
                  lineHeight: 23,
                },
              },
            },
          },
          data: [20],
        },
        {
          type: "pie",
          name: "验收合格数:",
          radius: [0, "35.5%"],
          center: [
            index < 2 ? index * 39 + 20 + "%" : index * 40 - 40 + "%",
            index < 2 ? "25%" : "68%",
          ],
          data: [20],
          hoverAnimation: false,
          clockWise: false,
          itemStyle: {
            normal: {
              color: "#041b2d",
            },
          },
          label: {
            normal: {
              show: true,
              position: "center",
              padding: [180, 45, 0, 40],
              align: "center",
              width: 70,
              height: 160,
              lineHeight: 14, // 控制\n的行高
              fontSize: 34,
              formatter: function (param) {
                return (
                  "{a| " + param.seriesName + "}" + "{b|" + item.indxVl2 + "}"
                );
              },
              rich: {
                a: {
                  fontSize: 10,
                  color: "#fff",
                  lineHeight: 23,
                },
                b: {
                  fontSize: 10,
                  color: "#e92438",
                  lineHeight: 23,
                },
              },
            },
          },
        }
      );
    });
    var option = {
      title: titleArr,
      series: seriesArr,
    };
    myChart.setOption(option);
  }
}
// 机电系统工程合格率
electromechanicalSystemEchart();
function electromechanicalSystemEchart() {
  let electromechanicalSystemE = document.getElementsByClassName(
    "electromechanicalSystemEchart"
  );
  for (var i = 0; i < electromechanicalSystemE.length; i++) {
    let myChart = echarts.init(electromechanicalSystemE[i]);
    var demoData = [
      {
        name: "10号线二期",
        unit: "%",
        value: 100,
      },
      {
        name: "14号线",
        unit: "%",
        value: 100,
      },
      {
        name: "15号线",
        unit: "%",
        value: 100,
      },
      {
        name: "18号线",
        unit: "%",
        value: 100,
      },
    ];
    option = {
      series: (function () {
        var result = [];
        demoData.forEach(function (item, index) {
          result.push(
            {
              name: item.name,
              type: "gauge",
              radius: "45%",
              center: [
                index < 2 ? index * 50 + 25 + "%" : index * 50 - 75 + "%",
                index < 2 ? "28%" : "78%",
              ],
              startAngle: 225,
              endAngle: -45,
              min: 0,
              max: 100,
              axisLine: {
                show: true,
                lineStyle: {
                  width: 10,
                  shadowBlur: 0,
                  color: [
                    [0, "transparent"],
                    [0.1, "#194383"],
                    [0.108, "transparent"],
                    [0.2, "#194383"],
                    [0.208, "transparent"],
                    [0.3, "#194383"],
                    [0.308, "transparent"],
                    [0.4, "#194383"],
                    [0.408, "transparent"],
                    [0.5, "#194383"],
                    [0.508, "transparent"],
                    [0.6, "#194383"],
                    [0.608, "transparent"],
                    [0.7, "#194383"],
                    [0.708, "transparent"],
                    [0.8, "#194383"],
                    [0.808, "transparent"],
                    [0.9, "#194383"],
                    [0.908, "transparent"],
                    [1, "#194383"],
                  ],
                },
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                show: 0,
              },
              axisLabel: {
                show: 0,
              },
              pointer: {
                show: false,
              },
              detail: {
                show: false,
              },
              data: [
                {
                  show: false,
                },
              ],
            },
            {
              name: item.name,
              type: "gauge",
              radius: "50%",
              center: [
                index < 2 ? index * 50 + 25 + "%" : index * 50 - 75 + "%",
                index < 2 ? "28%" : "78%",
              ],
              startAngle: 225,
              endAngle: -45,
              min: 0,
              max: 100,
              axisLine: {
                show: true,
                lineStyle: {
                  width: 150,
                  color: [
                    [
                      item.value / 100,
                      new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        {
                          offset: 0,
                          color: "rgba(69, 161, 255,0)",
                        },
                        {
                          offset: 0.3,
                          color: "rgba(69, 161, 255,0)",
                        },
                        {
                          offset: 1,
                          color: "rgba(69, 161, 255,0.7)",
                        },
                      ]),
                    ],
                    [1, "rgba(28,128,245,.0)"],
                  ],
                },
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                show: 0,
              },
              axisLabel: {
                show: 0,
              },
              pointer: {
                show: false,
                length: "100%",
              },
              detail: {
                show: true,
                offsetCenter: [1, "1%"],
                textStyle: {
                  fontSize: 20,
                  color: "#0AFCE0",
                },
                formatter: ["{value}" + ("%" || "")].join("\n"),
              },
              itemStyle: {
                color: "rgba(28, 128, 245,.3)",
                borderColor: "rgba(28, 128, 245,1)",
              },
              data: [
                {
                  value: item.value,
                },
              ],
            },
            {
              type: "gauge",
              radius: "35%",
              center: [
                index < 2 ? index * 50 + 25 + "%" : index * 50 - 75 + "%",
                index < 2 ? "28%" : "78%",
              ],
              splitNumber: 8,
              min: 0,
              max: 100,
              startAngle: 225,
              endAngle: -45,
              axisLabel: {
                show: false,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  width: 0,
                  color: [
                    [
                      1,
                      new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                        {
                          offset: 1,
                          color: "#194383",
                        },
                        {
                          offset: 1,
                          color: "#194383",
                        },
                      ]),
                    ],
                  ],
                },
              },

              splitLine: {
                show: true,
                length: 10,
                color: "#90D1FE",
              },
              pointer: {
                show: 0,
              },
              detail: {
                show: 0,
              },
            },
            {
              type: "gauge",
              radius: "50%",
              center: [
                index < 2 ? index * 50 + 25 + "%" : index * 50 - 75 + "%",
                index < 2 ? "28%" : "78%",
              ],
              // center: [
              //   index < 2 ? index * 39 + 20 + "%" : index * 45 - 40 + "%",
              //   index < 2 ? "30%" : "75%",
              // ],
              splitNumber: 10,
              splitLine: {
                show: false,
              },
              min: 0,
              max: 100,
              startAngle: 225,
              endAngle: -45,
              axisLabel: {
                show: false,
                textStyle: {
                  fontSize: 12,
                },
              },
              axisLine: {
                show: false,
              },

              pointer: {
                show: 0,
              },
              axisTick: {
                show: false,
              },
              detail: {
                show: true,
                offsetCenter: [0, "50%"],
                formatter: item.name,
                textStyle: {
                  fontSize: 12,
                  color: "#ffffff",
                  lineHeight: 20,
                  fontWeight: "100",
                },
              },
            },
            {
              type: "gauge",
              radius: "50%",
              center: [
                index < 2 ? index * 50 + 25 + "%" : index * 50 - 75 + "%",
                index < 2 ? "28%" : "78%",
              ],
              splitNumber: 10,
              splitLine: {
                show: false,
              },
              min: 0,
              max: 100,
              startAngle: 225,
              endAngle: -45,
              axisLabel: {
                show: false,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  width: 2,
                  shadowBlur: 0,
                  color: [
                    [0.05, "#3F6BFC"],
                    [0.1, "#4072FB"],
                    [0.15, "#4077F9"],
                    [0.2, "#417BF9"],
                    [0.25, "#4282F8"],
                    [0.3, "#4385F7"],
                    [0.35, "#4389F6"],
                    [0.4, "#448FF5"],
                    [0.45, "#4594F4"],
                    [0.5, "#4599F3"],
                    [0.55, "#469EF2"],
                    [0.6, "#46A3F1"],
                    [0.65, "#46A6F0"],
                    [0.7, "#24befe"],
                    [0.75, "#12d1ff"],
                    [0.8, "#06defe"],
                    [0.85, "#05e0ff"],
                    [0.9, "#06deff"],
                    [0.95, "#06deff"],
                    [1, "#06deff"],
                  ],
                },
              },
              pointer: {
                show: 0,
              },
              axisTick: {
                show: false,
              },
              detail: {
                show: false,
              },
            },
            {
              type: "gauge",
              radius: "55%",
              center: [
                index < 2 ? index * 50 + 25 + "%" : index * 50 - 75 + "%",
                index < 2 ? "28%" : "78%",
              ],
              splitNumber: 10,
              splitLine: {
                show: false,
              },
              min: 0,
              max: 100,
              startAngle: 225,
              endAngle: -45,
              axisLabel: {
                show: false,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  width: 2,
                  shadowBlur: 0,
                  color: [
                    [0.05, "#0A498E"],
                    [0.1, "#0C58A7"],
                    [0.15, "#254DD3"],
                    [0.2, "#355FEC"],
                    [0.25, "#4072FB"],
                    [0.3, "#355FEC"],
                    [0.35, "#254DD3"],
                    [0.4, "#06478B"],
                    [0.45, "#0A246C"],
                    [0.5, "#071848"],
                    [0.55, "#071848"],
                    [0.6, "#0A246C"],
                    [0.65, "#06478B"],
                    [0.7, "#254DD3"],
                    [0.75, "#355FEC"],
                    [0.8, "#355FEC"],
                    [0.85, "#254DD3"],
                    [0.9, "#0C58A7"],
                    [0.95, "#0A498E"],
                    [1, "#0A498E"],
                  ],
                },
              },
              pointer: {
                show: 0,
              },
              axisTick: {
                show: false,
              },
              detail: {
                show: false,
              },
            }
          );
        });

        return result;
      })(),
    };
    myChart.setOption(option);
  }
}
// 新线故障修复率;
newLineFaultEchart();
function newLineFaultEchart() {
  let linePassengerVC = document.getElementsByClassName("newLineFaultEchart");
  for (var i = 0; i < linePassengerVC.length; i++) {
    let myChart = echarts.init(linePassengerVC[i]);
    var fourPieData = [
      {
        name: "故障报修数",
        value: 20,
      },
      {
        name: "接修数总量",
        value: 20,
      },
      {
        name: "修复数总量",
        value: 8,
      },
    ];
    var titleArr = [],
      seriesArr = [];
    fourPieData.forEach(function (item, index) {
      titleArr.push({
        text: `${item.value}`,
        subtext: item.name,
        left: index * 30 + 19 + "%",
        top: "35%",
        textAlign: "center",
        textStyle: {
          color: "#fff",
          fontSize: 14,
          fontFamily: "DINAlternate-Bold",
        },
        subtextStyle: {
          color: "#ff",
          fontSize: 12,
          fontFamily: "PingFangSC-Regular",
          top: "center",
        },
        itemGap: 4, //主副标题间距
      });
      seriesArr.push(
        // 内圆
        {
          type: "pie",
          radius: ["0", "40%"],
          center: [index * 30 + 20 + "%", "50%"],
          hoverAnimation: false,
          z: 0,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#FFC600",
                },
                {
                  offset: 0.5,
                  color: "#30D27C",
                },
                {
                  offset: 1,
                  color: "#0B95FF",
                },
              ]),
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
            },
          },
          label: {
            normal: {
              position: "center",
            },
          },
          data: [100],
        },
        // 进度圈
        {
          type: "pie",
          clockWise: true,
          radius: ["50%", "55%"],
          center: [index * 30 + 20 + "%", "50%"],
          hoverAnimation: false,
          label: {
            normal: {
              position: "inner",
              show: false,
            },
          },
          data: [
            {
              value: item.value,
              itemStyle: {
                normal: {
                  borderWidth: 2,
                  borderColor: {
                    colorStops: [
                      {
                        offset: 0,
                        color: "#FFC600" || "#30D27C", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#0B95FF" || "#367bec", // 100% 处的颜色
                      },
                    ],
                  },
                  color: {
                    // 完成的圆环的颜色
                    colorStops: [
                      {
                        offset: 0,
                        color: "#FFC600" || "#30D27C", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#0B95FF" || "#367bec", // 100% 处的颜色
                      },
                    ],
                  },
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                },
              },
            },
            {
              name: "gap",
              value: item.value,
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  color: "rgba(0, 0, 0, 0)",
                  borderColor: "rgba(0, 0, 0, 0)",
                  borderWidth: 0,
                },
              },
            },
          ],
        },
        //刻度尺
        {
          // name: "白色圈刻度",
          type: "gauge",
          radius: "80%",
          center: [index * 30 + 20 + "%", "50%"],
          startAngle: 225, //刻度起始
          endAngle: -134.8, //刻度结束
          z: 4,
          axisTick: {
            show: true,
            lineStyle: {
              width: 2,
              color: "rgba(1,244,255, 0.9)",
            },
          },
          splitLine: {
            length: 12, //刻度节点线长度
            lineStyle: {
              width: 2,
              color: "rgba(1,244,255, 0.9)",
            }, //刻度节点线
          },
          axisLabel: {
            color: "rgba(255,255,255,0)",
            fontSize: 12,
          }, //刻度节点文字颜色
          pointer: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              opacity: 0,
            },
          },
          detail: {
            show: false,
          },
          data: [
            {
              value: 20,
              name: "",
            },
          ],
        }
      );
    });
    option = {
      title: titleArr,
      xAxis: {
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        axisLine: {
          show: false,
        },
      },
      yAxis: {
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        axisLine: {
          show: false,
        },
      },
      series: seriesArr,
    };

    option = {
      title: titleArr,
      series: seriesArr,
    };
    myChart.setOption(option);
  }
  let linePassengerVC1 = document.getElementsByClassName("newLineFaultEchart1");
  for (var i = 0; i < linePassengerVC1.length; i++) {
    let myChart = echarts.init(linePassengerVC1[i]);

    //非本人所创,借鉴各位前辈项目改善完成,仅供参考
    var highlight = "#03b7c9";

    var demoData = [
      {
        name: "接修率",
        value: 100,
        unit: "%",
        pos: ["25%", "50%"],
        range: [0, 100],
        YS: [
          [0.3, "#f3390d"],
          [0.7, "#119eff"],
          [1, "#30da74"],
        ],
      },
      {
        name: "修复率",
        value: 40,
        unit: "%",
        pos: ["75%", "50%"],
        range: [0, 100],
        splitNum: 10,
        YS: [
          [0.3, "#f3390d"],
          [0.7, "#119eff"],
          [1, "#30da74"],
        ],
      },
    ];

    option = {
      series: (function () {
        var result = [];
        demoData.forEach(function (item) {
          result.push(
            // 外围刻度
            {
              type: "gauge",
              center: item.pos,
              radius: "50%", // 1行2个
              splitNumber: item.splitNum || 10,
              min: item.range[0],
              max: item.range[1],
              startAngle: 225,
              endAngle: -45,
              axisLine: {
                show: true,
                lineStyle: {
                  width: 2,
                  shadowBlur: 0,
                  color: [[1, highlight]],
                },
              },
              axisTick: {
                show: true,
                lineStyle: {
                  color: highlight,
                  width: 1,
                },
                length: -5,
                splitNumber: 10,
              },
              splitLine: {
                show: true,
                length: -10,
                lineStyle: {
                  color: highlight,
                },
              },
              axisLabel: {
                distance: -18,
                textStyle: {
                  color: highlight,
                  fontSize: "10",
                },
              },
              pointer: {
                show: 0,
              },
              detail: {
                show: 0,
              },
            },
            {
              name: "速度",
              type: "gauge",
              center: item.pos,
              splitNumber: item.splitNum || 10,
              min: item.range[0],
              max: item.range[1],
              radius: "45%",
              axisLine: {
                // 坐标轴线
                show: false,
                lineStyle: {
                  // 属性lineStyle控制线条样式
                  color: item.YS,
                  shadowColor: "#ccc",
                  shadowBlur: 25,
                  width: 0,
                },
              },
              axisLabel: {
                show: false,
              },
              axisTick: {
                // 坐标轴小标记
                // show: false,
                length: 10, // 属性length控制线长
                lineStyle: {
                  // 属性lineStyle控制线条样式
                  color: "auto",
                  width: 2,
                },
              },
              splitLine: {
                // 分隔线
                show: false,
                length: 20, // 属性length控制线长
                lineStyle: {
                  // 属性lineStyle（详见lineStyle）控制线条样式
                  color: "auto",
                },
              },
              title: {
                textStyle: {
                  // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  fontWeight: "bolder",
                  fontSize: 20,
                  fontStyle: "italic",
                },
              },
              detail: {
                show: true,
                offsetCenter: [0, "100%"],
                textStyle: {
                  fontSize: 14,
                },
                formatter: [
                  "{value} " + (item.unit || ""),
                  "{name|" + item.name + "}",
                ].join("\n"),
                rich: {
                  name: {
                    fontSize: 14,
                    lineHeight: 20,
                    // color: "#fff",
                  },
                },
              },
              data: [
                {
                  value: item.value,
                },
              ],
              pointer: {
                width: 5,
              },
            },
            // 内侧指针、数值显示
            {
              name: item.name,
              type: "gauge",
              center: item.pos,
              radius: "40%",
              startAngle: 225,
              endAngle: -45,
              min: item.range[0],
              max: item.range[1],
              axisLine: {
                show: true,
                lineStyle: {
                  width: 0,
                  color: [[1, "rgba(75,228,255,.1)"]],
                },
              },
              axisTick: {
                show: 0,
              },
              splitLine: {
                show: 0,
              },
              axisLabel: {
                show: 0,
              },
              pointer: {
                show: true,
                length: "90%",
                width: 3,
              },
              itemStyle: {
                //表盘指针的颜色
                color: "rgba(255, 153, 0, 0.31)",
                borderColor: "#ff9900",
                borderWidth: 1,
              },
              detail: {
                show: false,
                offsetCenter: [0, "100%"],
                textStyle: {
                  fontSize: 30,
                  color: "#00eff2",
                },
                formatter: [
                  "{value} " + (item.unit || ""),
                  "{name|" + item.name + "}",
                ].join("\n"),
                rich: {
                  name: {
                    fontSize: 30,
                    lineHeight: 30,
                    color: "#00eff2",
                  },
                },
              },

              data: [
                {
                  value: item.value,
                },
              ],
            }
          );
        });
        return result;
      })(),
    };
    myChart.setOption(option);
  }
}
//质量问题整改闭合率
qualityProblemEchart();
function qualityProblemEchart() {
  let linePassengerVC = document.getElementsByClassName("qualityProblemEchart");
  for (var i = 0; i < linePassengerVC.length; i++) {
    let myChart = echarts.init(linePassengerVC[i]);
    option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
          label: {
            show: true,
          },
        },
      },
      grid: {
        left: "10%",
        top: "28%",
        right: "15%",
        bottom: "18%",
      },
      legend: {
        data: ["年度质量问题数", "年度整改闭合数", "指标值"],
        top: "4%",
        textStyle: {
          color: "#fff",
          fontSize: 12,
        },
      },
      xAxis: {
        data: ["10号线二期", "14号线", "15号线", "18号线"],
        axisLine: {
          show: true, //隐藏X轴轴线
          lineStyle: {
            color: "#3d5269",
            width: 1,
          },
        },
        axisTick: {
          show: true, //隐藏X轴刻度
          alignWithLabel: true,
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#fff", //X轴文字颜色
            fontSize: 12,
          },
          interval: 0,
          rotate: 30,
        },
      },
      yAxis: [
        {
          type: "value",
          name: "数量",
          nameTextStyle: {
            color: "#fff",
            fontSize: 12,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.3)",
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 12,
            },
          },
        },
        {
          type: "value",
          name: "指标值%",
          nameTextStyle: {
            color: "#fff",
            fontSize: 12,
          },
          position: "right",
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(255,255,255,0.3)",
            },
          },
          axisLabel: {
            show: true,
            formatter: "{value} %", //右侧Y轴文字显示
            textStyle: {
              color: "#fff",
              fontSize: 12,
            },
          },
        },
      ],
      series: [
        {
          name: "年度质量问题数",
          type: "bar",
          barWidth: 18,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#00FFFF",
                },
                {
                  offset: 1,
                  color: "#0080FF",
                },
              ]),
            },
          },
          data: [29, 47, 53, 57],
        },
        {
          name: "年度整改闭合数",
          type: "bar",
          barWidth: 18,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#E29052",
                },
                {
                  offset: 1,
                  color: "#FA5A53",
                },
              ]),
            },
          },
          data: [29, 47, 53, 57],
        },
        {
          name: "指标值",
          type: "line",
          yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
          showAllSymbol: true, //显示所有图形。
          symbol: "circle", //标记的图形为实心圆
          symbolSize: 6, //标记的大小
          itemStyle: {
            //折线拐点标志的样式
            color: "#26D9FF",
            borderColor: "#26D9FF",
            width: 2,
            shadowColor: "#26D9FF",
            shadowBlur: 2,
          },
          lineStyle: {
            color: "#26D9FF",
            width: 2,
            shadowBlur: 2,
          },
          data: [100, 100, 100, 100],
        },
      ],
    };
    myChart.setOption(option);
  }
}
// 质量检查完成率
securityCheckEchart();
function securityCheckEchart() {
  let linePassengerVC = document.getElementsByClassName("securityCheckEchart");
  for (var i = 0; i < linePassengerVC.length; i++) {
    let myChart = echarts.init(linePassengerVC[i]);
    var xData = ["10号线二期", "14号线", "15号线", "18号线"],
      yData1 = [57, 57, 57, 58],
      yData2 = [29, 29, 29, 29],
      yData3 = [47, 58, 56, 56],
      yData4 = [80, 85, 82, 80],
      borderData = [],
      legend = ["年度数量", "计划完成量", "实际完成量", "完成率"],
      colorArr = [
        {
          start: "rgba(155, 101, 229,",
          end: "rgba(18, 58, 86,0.5)",
        },
        {
          start: "rgba(71, 173, 245,",
          end: "rgba(18, 58, 86,0.5)",
        },
        {
          start: "rgba(82, 249, 107,",
          end: "rgba(18, 58, 86,0.5)",
        },
        {
          color: "#00EAFF",
        },
      ];
    var normalColor = "#fff";
    let seriesData = [];
    var borderHeight = 4;
    xData.forEach((element) => {
      borderData.push(borderHeight);
    });
    [yData1, yData2, yData3, yData4].forEach((item, index) => {
      var obj1 = {};
      var obj2 = {};
      if (index < 3) {
        obj1 = {
          name: legend[index],
          type: "bar",
          stack: legend[index],
          data: item,
          barWidth: "15%",
          itemStyle: {
            normal: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: colorArr[index].start + "0.7)",
                  },
                  {
                    offset: 0.5,
                    color: colorArr[index].start + "0.3)",
                  },
                  {
                    offset: 1,
                    color: colorArr[index].end,
                  },
                ],
                globalCoord: false,
              },
            },
          },
        };
        obj2 = {
          name: "",
          type: "bar",
          stack: legend[index],
          itemStyle: {
            normal: {
              color: colorArr[index].start + "1)",
            },
          },
          data: borderData,
        };
        seriesData.push(obj1);
        seriesData.push(obj2);
      } else {
        var obj3 = {
          name: legend[index],
          type: "line",
          yAxisIndex: 1,
          smooth: false,
          symbol: "circle",
          symbolSize: 10,
          lineStyle: {
            normal: {
              width: 2,
            },
          },
          itemStyle: {
            normal: {
              color: colorArr[index].color,
              borderColor: "#fff",
              borderWidth: 1,
            },
          },
          data: item,
          label: {
            normal: {
              show: false,
            },
          },
        };
        seriesData.push(obj3);
      }
    });
    console.log(seriesData);
    option = {
      grid: {
        left: "3%",
        top: "20%",
        right: "3%",
        bottom: "5%",
        containLabel: true,
      },
      legend: {
        show: true,
        icon: "rect",
        itemWidth: 20,
        itemHeight: 3,
        right: "5%",
        top: "3%",
        textStyle: {
          color: "#fff",
        },
        data: legend,
      },
      tooltip: {
        trigger: "axis",
        formatter: function (params) {
          var str = "";
          for (var i = 0; i < params.length; i++) {
            if (params[i].seriesName !== "") {
              str +=
                params[i].name +
                ":" +
                params[i].seriesName +
                params[i].value +
                "<br/>";
            }
          }
          return str;
        },
      },
      xAxis: [
        {
          type: "category",
          data: xData,
          axisPointer: {
            type: "shadow",
          },
          axisLabel: {
            textStyle: {
              color: normalColor,
              fontSize: 12,
            },
          },
          axisLine: {
            lineStyle: {
              color: normalColor,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          name: "数量",
          nameTextStyle: {
            color: normalColor,
            fontSize: 12,
          },
          // "min": 0,
          // "max": 50,
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: normalColor,
              fontSize: 12,
            },
          },
          axisLine: {
            lineStyle: {
              color: normalColor,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
            lineStyle: {
              type: "dashed",
              color: normalColor,
            },
          },
        },
        {
          type: "value",
          name: "%",
          nameTextStyle: {
            color: normalColor,
            fontSize: 12,
          },
          min: -100,
          max: 100,
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: normalColor,
              fontSize: 12,
            },
          },
          axisLine: {
            lineStyle: {
              color: normalColor,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "rgba(255,255,255,0.2)",
            },
          },
        },
      ],
      series: seriesData,
    };
    myChart.setOption(option);
  }
}
// 验收合格率
acceptanceRateEchart();
function acceptanceRateEchart() {
  let civilEngineeringE = document.getElementsByClassName(
    "acceptanceRateEchart"
  );
  var abscissaData = ["土建工程项目", "装饰安装工程项目", "机电系统工程项目"];
  var value = [100, 100, 100];
  var residueValue = [];

  var ellipseList = [];

  value.forEach((item, index) => {
    var xDeviation = 107 * index;
    residueValue.push(100 - item);
    ellipseList.push(
      {
        name: "中间立体圆",
        type: "pictorialBar",
        symbolSize: [25, 10],
        symbolOffset: [xDeviation, -5],
        z: 12,
        itemStyle: {
          normal: {
            color: "#2B5B4D",
          },
        },
        data: [
          {
            value: item,
            symbolPosition: "end",
          },
        ],
      },
      {
        name: "最底部立体圆",
        type: "pictorialBar",
        symbolSize: [25, 10],
        symbolOffset: [xDeviation, 5],
        z: 12,
        itemStyle: {
          normal: {
            color: "#01CC04",
          },
        },
        data: [100 - item],
      }
    );
  });

  ellipseList.push({
    //底部立体柱
    stack: "1",
    type: "bar",
    itemStyle: {
      normal: {
        color: "#01CC04",
        opacity: 0.7,
      },
    },
    // label: {
    //     show: true,
    //     position: "top",
    //     distance: 15,
    //     color: "#FFFE00",
    //     fontSize:10,
    //     formatter:'{c}'+'%',
    //     rotate: 45
    // },
    silent: true,
    barWidth: 25,
    barGap: "-100%", // Make series be overlap
    data: value,
  });

  for (var i = 0; i < civilEngineeringE.length; i++) {
    let myChart = echarts.init(civilEngineeringE[i]);

    option = {
      tooltip: {
        trigger: "none",
      },
      grid: {
        top: "10%",
        left: "12%",
      },
      xAxis: {
        show: true,
        data: abscissaData,
        axisTick: {
          show: true,
        },
        axisLine: {
          show: true,
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#FFFFFF",
          },
          interval: 0,
          // rotate: 45,
          margin: 20,
          align: "center",
        },
      },
      yAxis: {
        show: true,
        max: 100,
        axisLabel: {
          textStyle: {
            color: "#FFFFFF",
          },
          formatter: "{value}%",
        },
      },
      series: ellipseList,
    };

    myChart.setOption(option);
  }
}

// 工程备案完成率
projectFilingEchart();
function projectFilingEchart() {
  let projectFilingE = document.getElementsByClassName("projectFilingEchart");
  for (var i = 0; i < projectFilingE.length; i++) {
    let myChart = echarts.init(projectFilingE[i]);
    let value = 0;
    let title = "工程备案完成率";
    let int = value.toFixed(2).split(".")[0];
    let float = value.toFixed(2).split(".")[1];
    option = {
      title: {
        text: "{a|" + int + "}{b|." + float + "}\n{c|" + title + "}",
        x: "center",
        y: "center",
        textStyle: {
          rich: {
            a: {
              fontSize: 48,
              color: "#29EEF3",
            },
            b: {
              fontSize: 20,
              color: "#29EEF3",
              padding: [0, 0, 14, 0],
            },
            c: {
              fontSize: 14,
              color: "#ffffff",
              padding: [5, 0],
            },
          },
        },
      },
      series: [
        {
          type: "gauge",
          radius: "90%",
          clockwise: false,
          startAngle: "90",
          endAngle: "-269.9999",
          splitNumber: 25,
          detail: {
            offsetCenter: [0, -20],
            formatter: " ",
          },
          pointer: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: [
                [0, "#2CFAFC"],
                [99.9 / 100, "#1DE2A4"],
                [1, "rgba(32,187,252,0.15)"],
              ],
              width: 20,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            length: 32,
            lineStyle: {
              color: "#051F54",
              width: 6,
            },
          },
          axisLabel: {
            show: false,
          },
        },
        {
          type: "pie",
          name: "内层细圆环",
          radius: ["63%", "65%"],
          hoverAnimation: false,
          clockWise: false,
          itemStyle: {
            normal: {
              color: "#0C355E",
            },
          },
          label: {
            show: false,
          },
          data: [100],
        },
        {
          type: "pie",
          name: "内层环",
          radius: [0, "63%"],
          hoverAnimation: false,
          clockWise: false,
          itemStyle: {
            normal: {
              color: "#02163F",
            },
          },
          label: {
            show: false,
          },
          data: [100],
        },
      ],
    };
    myChart.setOption(option);
  }
  let projectFilingET = document.getElementsByClassName("projectFilingEchartT");
  for (var i = 0; i < projectFilingET.length; i++) {
    let myChart = echarts.init(projectFilingET[i]);
    let dashedPic =
      "";
    let color = ["#FF8700", "#ffc300", "#00e473", "#009DFF"];
    let chartData = [
      {
        name: "工地个数",
        value: 134,
        unit: "个",
      },
      {
        name: "工程备案通过数",
        value: 0,
        unit: "个",
      },
    ];
    let arrName = [];
    let arrValue = [];
    let sum = 100;
    let pieSeries = [],
      lineYAxis = [];

    // 数据处理
    chartData.forEach((v, i) => {
      arrName.push(v.name);
      arrValue.push(v.value);
      sum = sum + v.value;
    });

    // 图表option整理
    chartData.forEach((v, i) => {
      pieSeries.push({
        name: "学历",
        type: "pie",
        clockWise: false,
        hoverAnimation: false,
        radius: [85 - i * 15 + "%", 77 - i * 15 + "%"],
        center: ["50%", "50%"],
        label: {
          show: false,
        },
        data: [
          {
            value: v.value,
            name: v.name,
          },
          {
            value: sum - v.value,
            name: "",
            itemStyle: {
              color: "rgba(0,0,0,0)",
            },
          },
        ],
      });
      pieSeries.push({
        name: "",
        type: "pie",
        silent: true,
        z: 1,
        clockWise: false, //顺时加载
        hoverAnimation: false, //鼠标移入变大
        radius: [85 - i * 15 + "%", 77 - i * 15 + "%"],
        center: ["50%", "50%"],
        label: {
          show: false,
        },
        data: [
          {
            value: 7.5,
            itemStyle: {
              color: "#E3F0FF",
            },
          },
          {
            value: 2.5,
            name: "",
            itemStyle: {
              color: "rgba(0,0,0,0)",
            },
          },
        ],
      });
      v.percent = ((v.value / sum) * 100).toFixed(1) + "%";
      lineYAxis.push({
        value: i,
        textStyle: {
          rich: {
            circle: {
              color: color[i],
              padding: [0, 5],
            },
          },
        },
      });
    });

    option = {
      color: color,
      // backgroundColor: "#fff",
      grid: {
        top: "32%",
        bottom: "54%",
        left: "30%",
        containLabel: false,
      },
      yAxis: [
        {
          type: "category",
          inverse: true,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            formatter: function (params) {
              let item = chartData[params];
              console.log(item);
              return (
                "{line|}{circle|●}{name|" +
                item.name +
                "}{bd||}{value|" +
                item.value +
                "}{unit|个}"
              );
            },
            interval: 0,
            inside: true,
            textStyle: {
              color: "#fff",
              fontSize: 12,
              rich: {
                name: {
                  color: "#fff",
                  fontSize: 12,
                },
                value: {
                  color: "#fff",
                  fontSize: 12,
                  fontWeight: 500,
                },
                unit: {
                  fontSize: 14,
                },
              },
            },
            show: true,
          },
          data: lineYAxis,
        },
      ],
      xAxis: [
        {
          show: false,
        },
      ],
      series: pieSeries,
    };
    myChart.setOption(option);
  }
}

//信用评价历史对比
creditEvaluationEchart();
function creditEvaluationEchart() {
  let linePassengerVC = document.getElementsByClassName(
    "creditEvaluationEchart"
  );
  for (var i = 0; i < linePassengerVC.length; i++) {
    let myChart = echarts.init(linePassengerVC[i]);
    option = {
      tooltip: {},
      title: {
        show: true,
        text: "2018年各单位信用评价得分",
        top: "1%",
        right: "1%",
        textStyle: {
          color: "#fff",
          fontSize: 12,
        },
      },
      animationDurationUpdate: function (idx) {
        // 越往后的数据延迟越大
        return idx * 100;
      },
      animationEasingUpdate: "bounceIn",
      color: ["#fff", "#fff", "#fff"],
      series: [
        {
          type: "graph",
          layout: "force",
          force: {
            repulsion: 150,
            edgeLength: 10,
          },
          roam: true,
          label: {
            normal: {
              show: true,
              formatter: "{b}\n" + "{c}",
            },
          },
          data: [
            {
              name: "中交",
              value: 10000,
              symbolSize: 80,
              draggable: true,
              itemStyle: {
                normal: {
                  borderColor: "rgb(27, 94, 93)",
                  borderWidth: 4,
                  shadowBlur: 100,
                  shadowColor: "rgb(27, 94, 93)",
                  color: "rgb(27, 94, 93)",
                },
              },
            },
            {
              name: "腾达",
              value: 6181,
              symbolSize: 70,
              draggable: true,
              itemStyle: {
                normal: {
                  borderColor: "rgb(206, 188, 11)",
                  borderWidth: 4,
                  shadowBlur: 100,
                  shadowColor: "rgb(206, 188, 11)",
                  color: "rgb(206, 188, 11)",
                },
              },
            },
            {
              name: "宏润",
              value: 4386,
              symbolSize: 70,
              draggable: true,
              itemStyle: {
                normal: {
                  borderColor: "rgb(165, 190, 198)",
                  borderWidth: 4,
                  shadowBlur: 100,
                  shadowColor: "rgb(165, 190, 198)",
                  color: "rgb(165, 190, 198)",
                },
              },
            },
            {
              name: "建工",
              value: 4055,
              symbolSize: 70,
              draggable: true,
              itemStyle: {
                normal: {
                  borderColor: "rgb(98, 41, 72)",
                  borderWidth: 4,
                  shadowBlur: 100,
                  shadowColor: "rgb(98, 41, 72)",
                  color: "rgb(98, 41, 72)",
                },
              },
            },
            {
              name: "隧道",
              value: 2467,
              symbolSize: 70,
              draggable: true,
              itemStyle: {
                normal: {
                  borderColor: "rgb(175, 20, 143)",
                  borderWidth: 4,
                  shadowBlur: 100,
                  shadowColor: "rgb(175, 20, 143)",
                  color: "rgb(175, 20, 143)",
                },
              },
            },
            {
              name: "中铁建",
              value: 2244,
              symbolSize: 70,
              draggable: true,
              itemStyle: {
                normal: {
                  borderColor: "rgb(77, 231, 55)",
                  borderWidth: 4,
                  shadowBlur: 100,
                  shadowColor: "rgb(77, 231, 55)",
                  color: "rgb(77, 231, 55)",
                },
              },
            },
            {
              name: "中铁工",
              value: 1898,
              symbolSize: 70,
              draggable: true,
              itemStyle: {
                normal: {
                  borderColor: "rgb(26, 83, 246)",
                  borderWidth: 4,
                  shadowBlur: 100,
                  shadowColor: "rgb(26, 83, 246)",
                  color: "rgb(26, 83, 246)",
                },
              },
            },
            {
              name: "中建八局",
              value: 1484,
              symbolSize: 70,
              draggable: true,
              itemStyle: {
                normal: {
                  borderColor: "rgb(155, 118, 127)",
                  borderWidth: 4,
                  shadowBlur: 100,
                  shadowColor: "rgb(155, 118, 127)",
                  color: "rgb(155, 118, 127)",
                },
              },
            },
            {
              name: "浦东建设",
              value: 1112,
              symbolSize: 70,
              draggable: true,
              itemStyle: {
                normal: {
                  borderColor: "rgb(116, 207, 18)",
                  borderWidth: 4,
                  shadowBlur: 100,
                  shadowColor: "rgb(116, 207, 18)",
                  color: "rgb(116, 207, 18)",
                },
              },
            },
          ],
        },
      ],
    };
    myChart.setOption(option);
  }
}
// 列车运行图兑现率
operationCashingEchart();
function operationCashingEchart() {
  let operationCashingE = document.getElementsByClassName(
    "operationCashingEchart"
  );
  for (var i = 0; i < operationCashingE.length; i++) {
    let myChart = echarts.init(operationCashingE[i]);
    var axisTickLength = 25; //刻度线宽度
    var value = 29.75;
    var colorRegionRate = (value / 100).toFixed(2);
    var index = value >= 80 ? 0 : value > 30 ? 1 : 2;
    var startColor = ["#34da62", "#fed95f", "#f56c6c"][index];
    var endColor = ["#14a661", "#ff8e02", "#f44444"][index];
    option = {
      series: [
        {
          type: "gauge",
          name: "外层半透明边框圈",
          radius: "90%",
          startAngle: "225",
          endAngle: "-45",
          splitNumber: "100",
          pointer: {
            show: false,
          },
          detail: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: [[1, "rgba(255,255,255,0.1)"]],
              width: 8,
              opacity: 1,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
        },
        {
          type: "gauge",
          name: "第二层",
          radius: "78%",
          startAngle: "225",
          endAngle: "-45",
          splitNumber: 4,
          pointer: {
            show: true,
            length: "53%",
          },
          // 仪表盘指针样式。
          itemStyle: {
            color: "#f6fefe",
          },
          data: [
            {
              value: value,
              name: "警押比",
            },
          ],
          title: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: [
                // 有数值的部分
                [
                  colorRegionRate,
                  new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {
                      offset: 0,
                      color: startColor, // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: endColor, // 100% 处的颜色
                    },
                  ]),
                ],
                // 底色
                [
                  1,
                  new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {
                      offset: 0,
                      color: "rgba(255,255,255,0.1)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(255,255,255,0.1)", // 100% 处的颜色
                    },
                  ]),
                ],
              ],
              width: 50,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              opacity: 1,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          detail: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          animationDuration: 2000,
        },
        {
          name: "第三层渐变圈",
          type: "gauge",
          radius: "60%",
          startAngle: "225",
          endAngle: "-45",
          splitNumber: 20,
          pointer: {
            show: false,
          },
          data: [
            {
              value: value,
              name: "兑现率",
            },
          ],

          axisLine: {
            show: true,
            lineStyle: {
              color: [
                // 有数值的部分
                [
                  colorRegionRate,
                  new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {
                      offset: 0,
                      color: startColor, // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: endColor, // 100% 处的颜色
                    },
                  ]),
                ],
                // 底色
                [
                  1,
                  new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {
                      offset: 0,
                      color: "rgba(255,255,255,0.1)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(255,255,255,0.1)", // 100% 处的颜色
                    },
                  ]),
                ],
              ],
              width: axisTickLength, // 刻度线宽度
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              opacity: 1,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          // 仪表盘指针样式。
          itemStyle: {
            color: "#f6fefe",
          },
          title: {
            show: false,
          },
          detail: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          animationDuration: 2000,
        },
        {
          name: "与div背景色相同模拟axisTick",
          type: "gauge",
          radius: "60%",
          startAngle: "225",
          endAngle: "-45",
          splitNumber: 1,
          pointer: {
            show: false,
          },
          title: {
            show: false,
          },
          detail: {
            show: true,
            offsetCenter: [0, "80%"],
            formatter: (value) => {
              return [`{a|${value}}{b|%}`, `{c|列车运行图兑现率}`].join("\n");
            },
            rich: {
              a: {
                color: "#DFE3F5",
                fontWeight: 600,
                fontSize: 14,
              },
              b: {
                color: "#DFE3F5",
                fontWeight: 600,
                fontSize: 14,
              },
              c: {
                color: "#DFE3F5",
                fontWeight: 600,
                fontSize: 14,
              },
            },
          },
          data: [
            {
              value: value,
              name: "兑现率",
            },
          ],
          axisLine: {
            show: false,
            lineStyle: {
              width: 1,
              opacity: 0,
            },
          },
          axisTick: {
            show: true,
            splitNumber: 60,
            length: axisTickLength, // 刻度线宽度
            lineStyle: {
              // 与div背景色相同
              color: "#333f54",
              width: 5,
            },
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
        },
      ],
    };
    myChart.setOption(option);
  }
}

// 列车服务可靠度;
serviceReliabilityEchart();
function serviceReliabilityEchart() {
  let serviceReliabilityE = document.getElementsByClassName(
    "serviceReliabilityEchart"
  );
  for (var i = 0; i < serviceReliabilityE.length; i++) {
    let myChart = echarts.init(serviceReliabilityE[i]);
    var dataArr = [
      {
        value: 21.085,
        name: "列车服务可靠度",
      },
    ];
    var color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
      {
        offset: 0,
        color: "#5CF9FE", // 0% 处的颜色
      },
      {
        offset: 0.17,
        color: "#468EFD", // 100% 处的颜色
      },
      {
        offset: 0.9,
        color: "#468EFD", // 100% 处的颜色
      },
      {
        offset: 1,
        color: "#5CF9FE", // 100% 处的颜色
      },
    ]);
    var colorSet = [
      [0.91, color],
      [1, "#15337C"],
    ];
    var rich = {
      white: {
        fontSize: 35,
        color: "#fff",
        fontWeight: "500",
        padding: [-40, 0, 0, 0],
      },
      bule: {
        fontSize: 35,
        fontFamily: "DINBold",
        color: "#fff",
        fontWeight: "700",
        padding: [-40, 0, 0, 0],
      },
      radius: {
        width: 100,
        height: 30,
        // lineHeight:80,
        borderWidth: 1,
        borderColor: "#0092F2",
        fontSize: 14,
        color: "#fff",
        backgroundColor: "#1B215B",
        borderRadius: 10,
        textAlign: "center",
      },
      size: {
        height: 10,
        padding: [140, 0, 0, 0],
      },
    };
    option = {
      backgroundColor: "#0E1327",
      tooltip: {
        formatter: "{a} <br/>{b} : {c}%",
      },
      series: [
        {
          //内圆
          type: "pie",
          radius: "90%",
          center: ["50%", "50%"],
          z: 0,
          itemStyle: {
            normal: {
              color: new echarts.graphic.RadialGradient(
                0.5,
                0.5,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(17,24,43,0)",
                  },
                  {
                    offset: 0.5,
                    // color: '#1E2B57'
                    color: "rgba(28,42,91,.6)",
                  },
                  {
                    offset: 1,
                    color: "#141C33",
                    // color:'rgba(17,24,43,0)'
                  },
                ],
                false
              ),
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
            },
          },
          hoverAnimation: false,
          label: {
            show: false,
          },
          tooltip: {
            show: false,
          },
          data: [100],
        },
        {
          type: "gauge",
          name: "外层辅助",
          radius: "80%",
          startAngle: "225",
          endAngle: "-45",
          splitNumber: "100",
          pointer: {
            show: false,
          },
          detail: {
            show: false,
          },
          data: [
            {
              value: 1,
            },
          ],
          // data: [{value: 1, name: 90}],
          title: {
            show: true,
            offsetCenter: [0, 30],
            textStyle: {
              color: "#fff",
              fontStyle: "normal",
              fontWeight: "normal",
              fontFamily: "微软雅黑",
              fontSize: 20,
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: [[1, "#00FFFF"]],
              width: 2,
              opacity: 1,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            length: 20,
            lineStyle: {
              color: "#051932",
              width: 0,
              type: "solid",
            },
          },
          axisLabel: {
            show: false,
          },
        },
        {
          type: "gauge",
          radius: "75%",
          startAngle: "225",
          endAngle: "-45",
          pointer: {
            show: false,
          },
          detail: {
            formatter: function (value) {
              // var num = Math.round(value);
              return (
                "{bule|" +
                value +
                "}{white|}" +
                "{size|" +
                "}\n{radius|列车服务可靠度}"
              );
            },
            rich: rich,
            offsetCenter: ["0%", "0%"],
          },
          data: dataArr,
          title: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: colorSet,
              width: 15,
              // shadowBlur: 15,
              // shadowColor: '#B0C4DE',
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              opacity: 1,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
            length: 25,
            lineStyle: {
              color: "#00377a",
              width: 2,
              type: "solid",
            },
          },
          axisLabel: {
            show: false,
          },
        },
        {
          name: "灰色内圈", //刻度背景
          type: "gauge",
          z: 2,
          radius: "60%",
          startAngle: "225",
          endAngle: "-45",
          //center: ["50%", "75%"], //整体的位置设置
          axisLine: {
            // 坐标轴线
            lineStyle: {
              // 属性lineStyle控制线条样式
              color: [[1, "#018DFF"]],
              width: 2,
              opacity: 1, //刻度背景宽度
            },
          },
          splitLine: {
            show: false,
          },
          // data: [{
          //     show: false,
          //     value: '80'
          // }], //作用不清楚
          axisLabel: {
            show: false,
          },
          pointer: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          detail: {
            show: 0,
          },
        },
        {
          name: "白色圈刻度",
          type: "gauge",
          radius: "60%",
          startAngle: 225, //刻度起始
          endAngle: -45, //刻度结束
          z: 4,
          axisTick: {
            show: false,
          },
          splitLine: {
            length: 16, //刻度节点线长度
            lineStyle: {
              width: 2,
              color: "rgba(1,244,255, 0.9)",
            }, //刻度节点线
          },
          axisLabel: {
            color: "rgba(255,255,255,0)",
            fontSize: 12,
          }, //刻度节点文字颜色
          pointer: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              opacity: 0,
            },
          },
          detail: {
            show: false,
          },
          data: [
            {
              value: 0,
              name: "",
            },
          ],
        },
        {
          //内圆
          type: "pie",
          radius: "56%",
          center: ["50%", "50%"],
          z: 1,
          itemStyle: {
            normal: {
              color: new echarts.graphic.RadialGradient(
                0.5,
                0.5,
                0.8,
                [
                  {
                    offset: 0,
                    color: "#4978EC",
                  },
                  {
                    offset: 0.5,
                    color: "#1E2B57",
                  },
                  {
                    offset: 1,
                    color: "#141F3D",
                  },
                ],
                false
              ),
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
            },
          },
          hoverAnimation: false,
          label: {
            show: false,
          },
          tooltip: {
            show: false,
          },
          data: [100],
        },
      ],
    };
    myChart.setOption(option);
  }
}
//列车退出正线运行故障率
mainLineOperationEchart();
function mainLineOperationEchart() {
  let mainLineOperationE = document.getElementsByClassName(
    "mainLineOperationEchart"
  );
  for (var i = 0; i < mainLineOperationE.length; i++) {
    let myChart = echarts.init(mainLineOperationE[i]);
    var value = 0.105;
    option = {
      title: {
        text: `${value}`,
        subtext: "列车试运行实际值",
        left: "center",
        top: "center", //top待调整
        textStyle: {
          color: "#fff",
          fontSize: 30,
          fontFamily: "DINAlternate-Bold",
        },
        subtextStyle: {
          color: "#ff",
          fontSize: 14,
          fontFamily: "PingFangSC-Regular",
          top: "center",
        },
        itemGap: 5, //主副标题间距
      },
      xAxis: {
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        // data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
      },
      yAxis: {
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        axisLine: {
          show: false,
        },
      },
      series: [
        // 内圆
        {
          type: "pie",
          radius: ["0", "55%"],
          center: ["50%", "50%"],
          hoverAnimation: false,
          z: 0,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#FFC600",
                },
                {
                  offset: 0.5,
                  color: "#30D27C",
                },
                {
                  offset: 1,
                  color: "#0B95FF",
                },
              ]),
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
            },
          },
          label: {
            normal: {
              position: "center",
            },
          },
          data: [100],
        },
        // 进度圈
        {
          type: "pie",
          clockWise: true,
          radius: ["70%", "65%"],
          hoverAnimation: false,
          label: {
            normal: {
              position: "inner",
              show: false,
            },
          },
          data: [
            {
              value: value,
              itemStyle: {
                normal: {
                  borderWidth: 10,
                  borderColor: {
                    colorStops: [
                      {
                        offset: 0,
                        color: "#FFC600" || "#30D27C", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#0B95FF" || "#367bec", // 100% 处的颜色
                      },
                    ],
                  },
                  color: {
                    // 完成的圆环的颜色
                    colorStops: [
                      {
                        offset: 0,
                        color: "#FFC600" || "#30D27C", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#0B95FF" || "#367bec", // 100% 处的颜色
                      },
                    ],
                  },
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                },
              },
            },
            {
              name: "gap",
              value: 100 - value,
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  color: "rgba(0, 0, 0, 0)",
                  borderColor: "rgba(0, 0, 0, 0)",
                  borderWidth: 0,
                },
              },
            },
          ],
        },
        //刻度尺
        {
          // name: "白色圈刻度",
          type: "gauge",
          radius: "85%",
          startAngle: 225, //刻度起始
          endAngle: -134.8, //刻度结束
          z: 4,
          axisTick: {
            show: true,
            lineStyle: {
              width: 2,
              color: "rgba(1,244,255, 0.9)",
            },
          },
          splitLine: {
            length: 16, //刻度节点线长度
            lineStyle: {
              width: 2,
              color: "rgba(1,244,255, 0.9)",
            }, //刻度节点线
          },
          axisLabel: {
            color: "rgba(255,255,255,0)",
            fontSize: 12,
          }, //刻度节点文字颜色
          pointer: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              opacity: 0,
            },
          },
          detail: {
            show: false,
          },
          data: [
            {
              value: 0,
              name: "",
            },
          ],
        },
      ],
    };
    myChart.setOption(option);
  }
}
